<template>
 <div class="comp" @click="reset">
        <!-- 图表区域 -->
        <div class="chart" ref="map"></div>
    </div>
</template>

<script>
import getProvinceMapInfo from '../../public/static/map'
export default {
 data() {
 return {
         echartsInstance:null,//存储echarts实例对象
            allData:[]//业务数据
 };
 },
 mounted() {
     // 1.定义获取实例 设置基础静态配置项的绘图方法
        this.initEcharts()
        window.addEventListener('resize',this.adapTive)
        //使用适配方法
        this.adapTive() 
        // console.log(getProvinceMapInfo(info,name))
 },
 methods: {
      // 1.定义获取实例 设置基础静态配置项的绘图方法
     async   initEcharts(){
            // 1.1获取实例对象
            this.echartsInstance = this.$echarts.init(this.$refs.map,'dark')

            //解构获取绘制中国地图的经纬度数
             let {data} = await this.$http.get('http://localhost:8080/static/map/china.json')

             // 1.3将地理数据注册到echarts中 (注册可用的地图)
            this.$echarts.registerMap('china',data)

            // 1.2设置静态配置项（配置项是不会变的）
            let initOptions={
                // 配置标题
                title:{
                    text:"▍各省区种植面积",
                    top:"3%",
                    left:"3%"
                },
            }
            // 1.3绘制图表
            this.echartsInstance.setOption(initOptions)
            this.getData()

            this.echartsInstance.on('click',async (info)=>{
                  let {name,path} = getProvinceMapInfo(info.name)
                let {data}=await this.$http.get('http://localhost:8080'+path)
                this.$echarts.registerMap(name,data)
                this.echartsInstance.setOption({
                    series:[
                         {
                             map:name,
                                        zoom:1,
                                        itemStyle:{
                                            areaColor:"orange"//设置地图的填充颜色
                                        },
                                        label:{show:true},
                                        center:undefined//重置画布的视觉中心点（自适应）
                         }
                    ]
                })
            })
        },
    // 2.获取业务数据
        async getData(){
            let {data} = await this.$http.get('CropCoverage')
            this.allData = data.content;
            // console.log(data)
            // 继续绘制图表
            this.setEcharts()
        },
        // 3.根据业务数据继续完善图表
        setEcharts(){
            console.log('set方法');
            // 3.1设置完善的配置项
            let setOptions={
                series:[
                    {
                        type:"map",//地图类型
                        map:'china',//绘制地图需要的数据
                        data:this.allData,//配置系列数据
                        roam:true,//是否开启鼠标缩放和平移漫游
                        zoom:1.1,//当前视角的缩放比例默认是1
                        top:"20%",
                        label:{
                            show:false
                        }
                    }
                ],
                // 配置视觉映射组件
                visualMap:[
                    {   
                        // 配置图元样式
                        inRange: {
                            color: ['orangered', 'orange'],//设置颜色
                        },
                        // 配置拖拽手柄
                        calculable:true,
                        // 配置两端的提示文本
                        text:['High', 'Low'],
                        // 调整位置 top bottom  left  right
                        left:"3%",
                        bottom:"3%"
                    }
                ]
            }
            // 3.2再次绘制图表 setOption()可以将多次的绘图配置项合拼重置绘制新的图表
            this.echartsInstance.setOption(setOptions)
        },
        // 4.窗口适配
        adapTive(){
            // console.log('窗口适配了')
            // 设置比例尺
            let width = this.$refs.map.offsetWidth;
            // 比例尺基数3.5-3.7
            let scale = width / 100 *3.6
            // 问题：字体大小 柱状宽度、圆角
            let adapOption={
                // 配置标题
                title:{
                    textStyle:{
                        fontSize:scale
                    }
                }
            }
            // 重新适配绘制图表
            this.echartsInstance.setOption(adapOption)
            this.echartsInstance.resize()//只能处理坐标系内的图表大小
        },
        // 5.还原到中国地图
        reset(){
            console.log(111)
            // 绘制省份地图
            this.echartsInstance.setOption({
                series:[
                    {
                        map:'china',
                        zoom:1.1,
                        label:{show:false},
                        center:undefined//重置画布的视觉中心点（自适应）
                    }
                ]
            })
        }
    },
    beforeDestroy(){
        // 注销窗口监听器 防止内存泄露
        window.removeEventListener('resize',this.adapTive)
    }
 
};
</script>

<style scoped>

</style>
